{% extends 'accounts/base.html' %}

{% block title %}欢迎页面{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center py-5">
                    <h1 class="display-4 fw-bold text-primary mb-3">
                        <i class="fas fa-hand-sparkles me-3"></i>欢迎使用RBAC权限管理系统
                    </h1>
                    <p class="lead text-muted mb-4">
                        一个功能完善的权限管理系统，为您提供安全可靠的应用管理体验
                    </p>
                    <div class="d-flex justify-content-center align-items-center">
                        <div class="me-4">
                            <i class="fas fa-user-circle fa-2x text-primary"></i>
                            <p class="mb-0 mt-2">{{ user.username }}</p>
                        </div>
                        <div>
                            <i class="fas fa-clock fa-2x text-info"></i>
                            <p class="mb-0 mt-2">{{ current_time|date:"Y-m-d H:i" }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <h3 class="mb-4">
                <i class="fas fa-th-large me-2"></i>应用中心
            </h3>
        </div>
        
        <!-- 应用卡片 -->
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100 border-0 shadow-sm hover-lift">
                <div class="card-body d-flex flex-column">
                    <div class="text-center mb-3">
                        <div class="rounded-circle bg-primary bg-opacity-10 p-4 d-inline-block">
                            <i class="fas fa-users fa-2x text-primary"></i>
                        </div>
                    </div>
                    <h5 class="card-title text-center fw-bold">账户管理</h5>
                    <p class="card-text text-center text-muted flex-grow-1">
                        管理用户、角色和权限，控制系统的访问权限
                    </p>
                    <div class="mt-auto text-center">
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-primary w-100">
                            <i class="fas fa-arrow-right me-2"></i>进入管理
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100 border-0 shadow-sm hover-lift">
                <div class="card-body d-flex flex-column">
                    <div class="text-center mb-3">
                        <div class="rounded-circle bg-info bg-opacity-10 p-4 d-inline-block">
                            <i class="fas fa-chart-line fa-2x text-info"></i>
                        </div>
                    </div>
                    <h5 class="card-title text-center fw-bold">系统仪表板</h5>
                    <p class="card-text text-center text-muted flex-grow-1">
                        查看系统统计数据和实时监控信息
                    </p>
                    <div class="mt-auto text-center">
                        <a href="{% url 'accounts:dashboard' %}" class="btn btn-info w-100">
                            <i class="fas fa-arrow-right me-2"></i>查看仪表板
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mt-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">
                        <i class="fas fa-info-circle me-2 text-primary"></i>系统信息
                    </h5>
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <div class="border-start border-4 border-primary ps-3">
                                <p class="text-muted mb-1">当前用户</p>
                                <h5 class="mb-0">{{ user.username }}</h5>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border-start border-4 border-success ps-3">
                                <p class="text-muted mb-1">用户角色</p>
                                <h5 class="mb-0">
                                    {% for role in user.roles.all %}
                                        <span class="badge bg-success me-1">{{ role.name }}</span>
                                    {% empty %}
                                        <span class="badge bg-secondary">未分配</span>
                                    {% endfor %}
                                </h5>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border-start border-4 border-warning ps-3">
                                <p class="text-muted mb-1">权限数量</p>
                                <h5 class="mb-0">{{ user_permissions_count }}</h5>
                            </div>
                        </div>
                        <div class="col-md-3 mb-3">
                            <div class="border-start border-4 border-info ps-3">
                                <p class="text-muted mb-1">登录时间</p>
                                <h5 class="mb-0">{{ current_time|date:"m-d H:i" }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.hover-lift {
    transition: all 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

.card {
    border-radius: 15px;
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}
</style>
{% endblock %}